/* 
  门店首页
 */
<template>
<div class="page-container">
  <yd-layout>
    <yd-navbar slot="navbar" title="门店">
      <a  slot="left"  @click.prevent="$router.go(-1)" href="javascript:;">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </a>
    </yd-navbar>
    <yd-pullrefresh :callback="handleRefresh" ref="pullrefresh">
      <img class="banner-img" v-lazy="bannerTop" />
      <div class="store-header mb-1">
        <yd-flexbox  class="store-header-top">
          <yd-flexbox-item class="store-header-top--title"
            style="
              overflow : hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            "
          >FILORAGA 菲洛嘉医学抗衰老中心123123</yd-flexbox-item>
          <div class="store-header-top--right">
            <router-link :to="`/store/detail/${this.id}/select`">切换店铺</router-link>
          </div>
        </yd-flexbox>
        <yd-flexbox  class="store-header-bottom">
          <div>
            <yd-icon name="location"></yd-icon>
          </div>
          <yd-flexbox-item class="store-header-bottom--text">
            <div class="text-ellipsis--line2">东大桥路9号侨福芳草 地中心L2-14阿萨德阿萨德按时大受打击爱死了肯德基asdasd3214324234234dsf</div>
            <div>营业时间： 周一至周日 10:00-22:00</div>
          </yd-flexbox-item>
          <div>
            <a :href="`tel:4008001234`">
              <yd-icon name="phone1" size=".54rem"></yd-icon>
            </a>
          </div>
        </yd-flexbox>
      </div>
      <div class="mb-1">
        <doctor-slide :items="doctors" />
      </div>
      <section class="section mb-1">
        <div class="section-title">
          门店介绍
        </div>
      </section>
    </yd-pullrefresh>
    
  </yd-layout>
  <transition :name="pageTransition">
    <router-view />
  </transition>
</div>
</template>

<script>
import pageMixin from "../../mixins/page";
import { bannerImg } from "../../test/vars";
import doctorSlide from "./component/doctor-slide";
import { headImg } from "../../test/vars";
export default {
  components: { doctorSlide },
  props: {
    id: {},
  },
  mixins: [pageMixin],
  data() {
    return {
      bannerTop: bannerImg,
      doctors: [
        { id: 1, text: "美容师1", image: headImg },
        { id: 1, text: "美容师1", image: headImg },
        { id: 1, text: "美容师1", image: headImg },
        { id: 1, text: "美容师1", image: headImg },
        { id: 1, text: "美容师1", image: headImg },
        { id: 1, text: "美容师1", image: headImg },
        { id: 1, text: "美容师1", image: headImg },
        { id: 1, text: "美容师1", image: headImg },
      ],
    };
  },
  compoted:{
    pageTransition(){
      return this.$store.state.pageTransition
    }
  },
  watch: {
    id(val, oldVal) {
      if (val === oldVal) return;
      if (!val) return;

      this.loadData();
    },
  },


  methods: {
    async handleRefresh() {
      await this.loadData({
        isRefresh: true,
      }).catch(e => {});

      this.$refs.pullrefresh.$emit("ydui.pullrefresh.finishLoad");
    },
    async loadData(opts = {}) {
      if (!this.id) {
        return;
        this.handleStatusError("参数错误");
      }
      this.resetData();
      if (!opts.isRefresh) {
        this.indicator = true;
      }
      let res = await this.$api.getData().catch(() => {});
      if (!opts.isRefresh) {
        this.indicator = false;
      }
    },
    resetData() {},
    handleStatusError(mes) {
      this.$dialog.toast({
        mes,
        icon: "error",
      });
      this.$router.go(-1);
    },
    onPageCreated() {
      this.loadData();
    },
    onPageView() {},
  },
};
</script>

<style lang="scss" scoped>
.store-header {
  background-color: #fff;
  line-height: 1.4;

  .store-header-top {
    padding: 0.2rem;
    border-bottom: 0.01rem solid #eee;
    position: relative;
  }
  .store-header-top--title {
    padding: 0 1rem 0 0;
    font-size: 18px;
    pointer-events: none;
    line-height: 24px;
    white-space: nowrap;
  }
  .store-header-top--right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2rem;
    padding: 0.2rem;
    line-height: 24px;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 1) 20%,
      rgba(255, 255, 255, 1) 100%
    );
    text-align: right;
  }
  .store-header-bottom {
    padding: 0.2rem;
  }
  .store-header-bottom--text {
    padding: 0 0.1rem;
    font-size: 12px;
    pointer-events: none;
  }
}
</style>

